/**
 * 首屏
 *
 * @author li.youxi
 * @date 2017/05/25
 */

import './rain.scss';
import './index.scss';
import tpl from './index.html';
import globalMessage from 'libs/globalMessage.js';
import {catalogList} from '../../data.js';
import mainObj from '../main/index.js';
let doc = document;

var indexObj = {
    data () {
        return {
            list: catalogList
        }
    },
    init: function () {
        gameObj.setStatus('main');
        doc.querySelector('#game_main').innerHTML = tmpl(tpl, {
            list: this.data().list
        });

        requestAnimationFrame(() => {
            this.bindEvent();

            this.makeItRain();
        });
    },

    makeItRain: function () {
        $('.rain').empty();

        var increment = 0;
        var drops = "";
        var backDrops = "";

        while (increment < 100) {
            //couple random numbers to use for various randomizations
            //random number between 98 and 1
            var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
            //random number between 5 and 2
            var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
            //increment
            increment += randoFiver;
            //add in a new raindrop with various randomizations to certain CSS properties
            drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
            backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
        }

        $('.rain.front-row').append(drops);
        $('.rain.back-row').append(backDrops);
    },

    setPage (type) {

        mainObj.setPage(type);
        //gameObj.setStatus('main');
        //globalMessage.fire('init.main', type);
    },

    bindEvent: function(){
        var listEl = doc.querySelector('#cataList'),
            _this = this;

        listEl.addEventListener('click', function(e){
            var className = e.target.className,type;
            if(className.indexOf('catalog-item')!=-1) {
                type = e.target.getAttribute('data-type');  
                _this.setPage(type);            
            }
        }, false);
        // doc.querySelector('#catalog').addEventListener('click', function(e){
        //     gameObj.setStatus('catalog');
        //     globalMessage.fire('init.catalog');
        // }, false);
    }
};

indexObj.init();